<template>
  <view class="order-list-container">
    <view class="order-list">
      <view class="order-item" v-for="(order, index) in orderList" :key="index">
        <view class="order-header">
			<view class="order-img"><image class="header-img" src="/static/img/timess.png"></image></view>
          <view class="order-time">
			  
			  预约时间: {{order.createtime}}</view>
        </view>
        <view class="order-content">
			<view class="content-field">
				<view class="field-img">
					<image class="field-imgs" src="/static/img/ia.png"></image>
				</view>
				<view class="field-list">
					<view class="order-fielda">
					  <view class="field-label label-number">卡号</view>
					  <view class="field-value">{{order.card_number}}</view>
					</view>
					<view class="order-fieldb">
					  <view class="field-label label-number">密钥</view>
					  <view class="field-value">{{order.card_password}}</view>
					</view>
				</view>
			</view>
            <view class="order-ul">
				<view class="order-fielda">
				  <view class="field-label">联系方式</view>
				  <view class="field-value">{{order.mobile}}</view>
				</view>
				<view class="order-fieldb">
				  <view class="field-label">姓名</view>
				  <view class="field-value">{{order.consignee}}</view>
				</view>
				<view class="order-fieldc">
				  <view class="field-label">地址</view>
				  <view class="field-value">{{order.address}}</view>
				</view>
			</view>

        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import { GetsubData } from '../../../api';
			import dateConverter from '@/utils/date-converter.js';
export default {
  data() {
    return {
      orderList: [
        // {
        //   appointmentTime: '2025-08-01 10:27:39',
        //   cardNumber: '93756372392755674',
        //   key: '847312',
        //   contact: '蒙娜丽莎',
        //   name: '188838129898',
        //   address: '浙江省 杭州市 等驾坡街道阳光园阳光小区9号5单元'
        // },
        // {
        //   appointmentTime: '2025-08-01 10:27:39',
        //   cardNumber: '93756372392755674',
        //   key: '847312',
        //   contact: '蒙娜丽莎',
        //   name: '188838129898',
        //   address: '浙江省 杭州市 等驾坡街道阳光园阳光小区9号5单元'
        // },
        // {
        //   appointmentTime: '2025-08-01 10:27:39',
        //   cardNumber: '93756372392755674',
        //   key: '847312',
        //   contact: '蒙娜丽莎',
        //   name: '188838129898',
        //   address: '浙江省 杭州市 等驾坡街道阳光园阳光小区9号5单元'
        // }
      ]
    };
  },
  onShow(){
		  	  this.getrook();
  },
	  
  onLoad(){
	    console.log('token');
	    // this.getrook();
  },
  methods:{
	  
	 async getrook(){
		  let res=await GetsubData();
		  if(res.code==1){
			  this.orderList=res.data.data;
			  this.orderList.forEach((item,index)=>{
			  					  item.createtime=dateConverter.toYMD(item.createtime)
			  })
			  console.log('res',res);
		  }
	  }
  }
}
</script>

<style lang="scss">
$primary-color: #FF0000;
$text-color: #333333;
$light-text-color: #666666;
$border-color: #EEEEEE;
$padding: 30rpx;
$margin: 20rpx;

.order-list-container {
	box-sizing: border-box;
  padding: 38rpx 25rpx;
  background-color: #F8F8F8;
  min-height: 100vh;
  box-sizing: border-box;
		padding-bottom: 120rpx;
  .order-list {
    .order-item {
 width: 700rpx;
 height: 450rpx;
 margin-bottom: 32rpx;
 box-sizing: border-box;
      .order-header {
		  display: flex;
		      margin-bottom: 22rpx;
		  .order-img{
			  width: 28rpx;
			  height: 28rpx;
			  .header-img{
				  width: 28rpx;
				  height: 28rpx;
			  }
		  }
        .order-time {
			margin-left: 4rpx;
          font-size: 28rpx;
          color: #898989;
      
        }
      }

      .order-content {
		  width: 700rpx;
		  height: 394rpx;
		  // background-color: red;
		   background-color: #FFFFFF;
		   box-sizing: border-box;
		   padding: 34rpx 20rpx 24rpx 20rpx;
		   .content-field{
			   display: flex;
			   .field-img{
				   margin-right: 10rpx;
				   width: 44rpx;
				   height: 44rpx;
				   .field-imgs{
					   width: 44rpx;
					   height: 44rpx;
				   }
			   }
        .order-fielda {
          display: flex;
          margin-bottom: 24rpx;

          .field-label {
            width: 160rpx;
  
 
          }
            .label-number{
				color: #F11C00;
				font-size: 30rpx;
				font-weight: bold;
			}
          .field-value {
			  	font-weight: bold;
            flex: 1;
            font-size: 30rpx;
            color: #000;


          }
        }
		.order-fieldb {
			margin-top: 22rpx;
		  display: flex;
		  margin-bottom: 24rpx;
		
		  .field-label {
		    width: 160rpx;
	       
		  }
		    .label-number{
				color: #F11C00;
				font-size: 30rpx;
				font-weight: bold;
			}
		  .field-value {
		    flex: 1;
		    font-size: 28rpx;
		    color: #000;
		 font-weight: bold;
		
		
		  }
		}
			   
		   }
		   .order-ul{
			   background-color: #FAFAFB;
			   padding : 18rpx  16rpx 26rpx 50rpx;
			   width: 660rpx;
			   height: 208rpx;
			   // margin-top: 22rpx;
			   box-sizing: border-box;
			   .order-fielda {
			     display: flex;
			     .field-label {
			       width: 160rpx;
			       font-size: 26rpx;
			       color: #8E949B;
			     }
			     .field-value {
			       flex: 1;
			       font-size: 26rpx;
			       color: #000;
			     }
			   }
			   .order-fieldb {
				   margin-top: 12rpx;
			     display: flex;
			     .field-label {
			       width: 160rpx;
			       font-size: 26rpx;
			       color: #8E949B;
			     }

			     .field-value {
			       flex: 1;
			       font-size: 26rpx;
			       color: #000;

			   
			   
			     }
			   }
			   .order-fieldc {
				margin-top: 12rpx;
			     display: flex;
			     .field-label {
			       width: 160rpx;
			       font-size: 26rpx;
			       color: #8E949B;
			     }
			     .field-value {
			       flex: 1;
			       font-size: 26rpx;
			       color: #8E949B;
			   
			   
			     }
			   }
		   }

      }
    }
  }
}
</style>